<template>
   <el-card v-loading="loading">
       <template #header>
           <span>编辑用户 </span>
           <el-tag type="primary">ID：{{id}}</el-tag>
       </template>
        <!-- ref="form":对当前对象的获取，通过$获取当前对象 -->
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
           <el-form-item label="用户名" prop="username">
               <el-input v-model="form.username"></el-input>
           </el-form-item>
           <el-form-item label="性别">
               <el-radio v-model="form.gender" label="m">男</el-radio>
               <el-radio v-model="form.gender" label="f">女</el-radio>
           </el-form-item>
           <el-form-item label="手机" prop="phone">
               <el-input v-model="form.phone"></el-input>
           </el-form-item>
           <el-form-item label="邮箱" prop="email">
               <el-input v-model="form.email"></el-input>
           </el-form-item>
           <el-form-item>
               <el-button type="primary" @click="save()">保存</el-button>
               <el-button @click="back()">返回</el-button>
           </el-form-item>
       </el-form>
       
   </el-card>
</template>

<script>
export default {
  props: ["id"],
  data() {
    const isUserSame = async (rule, value, callback) => {
      if (value == this.originalForm.username) {
        callback();
        return;
      }
      var { data } = await this.axios({
        method: "get",
        url: `/users/exists/username/${value}`
      });
      if (data) {
        callback(new Error("用户名重复"));
      } else {
        callback();
      }
    };
    const isPhoneSame = async (rule, value, callback) => {
      if (value == this.originalForm.phone) {
        callback();
        return;
      }
      var { data } = await this.axios({
        method: "get",
        url: `/users/exists/phone/${value}`
      });
      if (data) {
        callback(new Error("手机号已存在"));
      } else {
        callback();
      }
    };
    const isEmailSame = async (rule, value, callback) => {
      if (value == this.originalForm.email) {
        callback();
        return;
      }
      var { data } = await this.axios({
        method: "get",
        url: `/users/exists/email/${value}`
      });
      if (data) {
        callback(new Error("邮箱已存在"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      form: {
        username: "",
        gender: "m",
        phone: "",
        email: "",
        confirmPassword: ""
      },
      rules: {
        username: [
          { required: true, message: "用户名必须填写！", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
          { validator: isUserSame }
        ],
        password: [
          { required: true, message: "密码必须填写！", trigger: "blur" },
          { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value == this.form.password) {
                callback();
              } else {
                callback(new Error("两次密码不一致"));
              }
            }
          }
        ],
        phone: [
          { required: true, message: "手机必须填写！" },
          {
            validator: (rule, value, callback) => {
              if (/^[1]([3-9])[0-9]{9}$/.test(value)) {
                callback();
              } else {
                callback(new Error("手机格式错误"));
              }
            }
          },
          { validator: isPhoneSame }
        ],
        email: [
          { required: true, message: "邮箱必须填写！" },
          { type: "email", message: "邮箱格式错误" },
          { validator: isEmailSame }
        ]
      }
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    async getUser() {
      const { data: { data } } = await this.axios({
        url: `/users/${this.id}`
      });
      this.originalForm = data;
      this.form.username = data.username;
      this.form.gender = data.gender;
      this.form.phone = data.phone;
      this.form.email = data.email;
    },
    async save() {
      await this.$refs.form.validate(async flag => {
        if (!flag) {
          return;
        }
        this.loading = true;
        await this.axios({
          method: "put",
          url: `/users/edit/${this.id}`,
          data: {
            username: this.form.username,
            gender: this.form.gender,
            phone: this.form.phone,
            email: this.form.email
          }
        });
        this.loading = false;
        this.$message.success("更新成功");
        this.$router.push({
          path: "/home/users"
        });
      });
    },
    back() {
      this.$router.push({ path: "home/users" });
    }
  }
};
</script>



